<template>
    <div>
        <!-- <div class="tab-header">
            <div class="headerTitle">卡片授权交易查询（账户类别->{{isCATEGORY}}）</div>
        </div>-->
        <div class="cardAuthorizationTransactionMain">
            <el-table
                :data="ImpowerList"
                border
                stripe
                style="width: 99%"
                class="heard-bg business_table"
            >
                <!-- <el-table-column  width="50" label="选项">
                        <template slot-scope="scope">
                            <el-radio v-model="dealId" :label="scope.row">{{ }}</el-radio>
                        </template>
                </el-table-column>-->
                <el-table-column label="时间" width="100">
                    <template
                        slot-scope="scope"
                    >{{scope.row.AUTHDATE | isDataShow(scope.row.AUTHTIME)}}</template>
                </el-table-column>
                <el-table-column label="金额">
                    <template slot-scope="scope">{{scope.row.AUTHAMT}}</template>
                </el-table-column>
                <el-table-column label="授权号码">
                    <template slot-scope="scope">{{scope.row.AUTHCODE}}</template>
                </el-table-column>
                <!-- <el-table-column  label="商户类型"> <template slot-scope="scope">{{scope.row.MERCHTYPE}} </template> </el-table-column> -->
                <el-table-column label="商户名称">
                    <template slot-scope="scope">{{scope.row.CARDNAME}}</template>
                </el-table-column>
                <el-table-column label="响应信息">
                    <template slot-scope="scope">{{scope.row.MESSAGE}}</template>
                </el-table-column>
                <el-table-column label="交易描述">
                    <template slot-scope="scope">{{scope.row.TRANDESP}}</template>
                </el-table-column>
                <el-table-column label="原始金额">
                    <template slot-scope="scope">{{scope.row.ORIAMT}}</template>
                </el-table-column>
                <el-table-column label="原始币种">
                    <template slot-scope="scope">{{scope.row.ORICURR| filterCURR(currencyList)}}</template>
                </el-table-column>
                <el-table-column label="汇率">
                    <template slot-scope="scope">{{scope.row.CONVRATE}}</template>
                </el-table-column>
                <el-table-column label="冲正时间">
                    <template slot-scope="scope">{{scope.row.REVDATE | filterDateMMDD}}</template>
                </el-table-column>
                <el-table-column label="授权状态">
                    <template slot-scope="scope">{{scope.row.AUTHSTS | filterAuthsts(ComAuthsts)}}</template>
                </el-table-column>
                <el-table-column label="授权匹配时间">
                    <template
                        slot-scope="scope"
                    >{{scope.row.MATCHDATE | isDataShow1(scope.row.MATCHTIME)}}</template>
                </el-table-column>
                <!-- <el-table-column  label="交易来源"> <template slot-scope="scope">{{scope.row.TRANSSRC}} </template> </el-table-column> -->
            </el-table>
            <div class="btnBox">
                <el-button
                    :disabled="currentPageIndex <=0"
                    type="primary"
                    @click="handleChildUp"
                >上一页</el-button>
                <el-button :disabled="!nextButtonFlag" type="primary" @click="handleChildDown">下一页</el-button>
                <!-- <el-button  :disabled="currentPageIndex <=0" type="primary"  @click="handleChildUp">上一页</el-button>
                <el-button :disabled="currentPageIndex >0" type="primary"  @click="handleChildDown">下一页</el-button>-->
                <!-- <el-button type="primary" @click="handleDispute">争议账款工单</el-button> -->
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import {
    trimString, closePage, getDictMappingValue, getDictSelectList, myMoment,
} from '@/utils/Common';
import { isEmptyObject } from '@/utils/Object';

export default {
    name: 'CardAuthorizationTransactionItem',
    props: {
        ImpowerList: {
            type: Array,
        },
        nextButtonFlag: {
            type: Boolean,
        },
        currentPageIndex: {
            type: Number,
        },
    },
    data() {
        return {
            tableData: [
                {
                    AUTHDATE: '123455',
                    AUTHAMT: '京东测试', // 授权金额
                    AUTHCODE: '', // 授权号码
                    MERCHTYPE: '', // 商户类型
                    CARDNAME: '', // 商户名称 受卡方名称
                    MESSAGE: '', // 响应信息
                    TRANDESP: '', // 交易描述TRAN-DESP
                    ORIAMT: '', // 原始金额
                    ORICURR: '', // 原始币种
                    CONVRATE: '', // 汇率
                    REVDATE: '', // 冲正时间
                    AUTHSTS: '', // 授权状态
                    MATCHTIME: '', // 授权匹配时间
                    SOURCE: '', // 交易来源 参见附录A.2固定格式交易来源代码表
                },
            ],
            dealId: {}, // 交易id
            CATEGORY: '',
            isCATEGORY: '',
            ComAuthsts: '', // 授权状态多选
            currencyList: '',
        };
    },
    filters: {
        isDataShow: (value1, value2) => {
            const t1 = value1 ? moment(`${value1}`, 'YYYYMMDD').format('YYYY-MM-DD') : '';
            const t2 = value2 ? myMoment(value2, 'hhmmss').format('HH:mm:ss') : '';
            return `${t1} ${t2}`;
        },
        isDataShow1: (value1, value2) => {
            if (value1 != '0' && value2 != '0') {
                value2 = value2 + '00';
                const t1 = value1 ? moment(`${value1}`, 'YYYYMMDD').format('YYYY-MM-DD') : '';
                const t2 = value2 ? myMoment(`${value2}`, 'HHMMSS').format('HH:mm:ss') : '';
                return `${t1} ${t2}`;
            }

        },
        filterAuthsts: (value, ComAuthsts) => {
            value = (`${value}`).trim();
            for (let index = 0; index < ComAuthsts.length; index++) {
                const element = ComAuthsts[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },
        filterTimeDate: (value) => {
            if (value) {
                value = moment(value, 'YYYYMMDD').format('YYYY-MM-DD');
                return value;
            }
            return '';
        },
        filterDateMMDD: (value) => {
            if (value) {
                return moment(value, 'MMDD').format('MM-DD');
            }
            return '';
        },
        filterCURR: (value, currencyList) => {
            value = (`${value}`).trim();
            for (let index = 0; index < currencyList.length; index++) {
                const element = currencyList[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },
    },
    computed: {
        ...mapGetters([
            'cardInfo_3004',
        ]),
    },
    mounted() {
        this.CATEGORY = this.cardInfo_3004.CATEGORY;
        this.getDictValue();

    },
    methods: {
        // 账户类型 字典取值
        async getDictValue() {
            console.log('进入！');
            // this.isCATEGORY =  await getDictMappingValue('CATE',this.formData.CATEGORY,this);
            this.ComAuthsts = await getDictSelectList('AUTHSTS', this);
            this.currencyList = await getDictSelectList('CURRENCY', this);
        },
        handleChildUp() {
            this.$emit('handleChangePage', 'pre');
        },
        handleChildDown() {
            this.$emit('handleChangePage', 'next');
        },
        handleDispute() { // 争议账款工单
            if (isEmptyObject(this.dealId)) {
                this.$alert('请选择授权记录!', '提示', {
                    customClass: 'warning', type: 'warning',
                });
            } else {
                this.$emit('DisputeWorkorder', this.dealId);
            }
        },
        handleReset() {
            this.$emit('handleResetFun');
        },
        // const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
        //       defaultParams.body.appHead.tranCode = '3020'
        //       defaultParams.body.appBody = appBody

    },

};
</script>

<style lang='scss'>
.cardAuthorizationTransactionMain {
    /* margin-top: 20px; */
    .btnBox {
        margin-top: 25px;
        margin-bottom: 40px;
        text-align: center;
    }
}
</style>
